{% extends 'base.html' %}

{% block title %}添加球台 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}添加球台{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .form-header {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f8f9fa;
    }

    .form-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .form-subtitle {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }

    .form-section {
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .form-row {
        margin-bottom: 1.5rem;
    }

    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .input-group-text {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-right: none;
        font-weight: 600;
        color: #495057;
    }

    .input-group .form-control {
        border-left: none;
    }

    .invalid-feedback {
        display: block;
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .form-text {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .rate-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
    }

    .rate-example {
        font-size: 0.875rem;
        color: #495057;
    }

    .status-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin-top: 0.5rem;
    }

    .status-option {
        position: relative;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .status-option:hover {
        border-color: #007bff;
        background: #f0f8ff;
    }

    .status-option input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .status-option input[type="radio"]:checked + .status-content {
        color: #007bff;
    }

    .status-option input[type="radio"]:checked ~ {
        border-color: #007bff;
        background: #f0f8ff;
    }

    .status-content {
        text-align: center;
    }

    .status-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .status-label {
        font-weight: 600;
        font-size: 0.875rem;
    }

    .status-desc {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid #f8f9fa;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
    }

    .form-check-input {
        margin: 0;
    }

    .form-check-label {
        margin: 0;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        .form-container {
            margin: 1rem;
            padding: 1.5rem;
        }

        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
        }

        .status-options {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 添加球台表单 -->
    <div class="form-container">
        <div class="form-header">
            <h1 class="form-title">添加新球台</h1>
            <p class="form-subtitle">创建一个新的球台资源，设置基本信息和使用规则</p>
        </div>

        <form method="POST" enctype="multipart/form-data" novalidate>
            {{ form.hidden_tag() }}

            <!-- 基本信息 -->
            <div class="form-section">
                <h5 class="section-title">
                    <i class="bi bi-info-circle"></i>基本信息
                </h5>

                <div class="form-row">
                    {{ form.name.label(class="form-label") }}
                    {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="请输入球台名称，如：球台01") }}
                    {% if form.name.errors %}
                        {% for error in form.name.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    <div class="form-text">建议使用简洁明确的命名，方便学员识别</div>
                </div>

                <div class="form-row">
                    {{ form.campus_id.label(class="form-label") }}
                    {{ form.campus_id(class="form-select" + (" is-invalid" if form.campus_id.errors else "")) }}
                    {% if form.campus_id.errors %}
                        {% for error in form.campus_id.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    <div class="form-text">选择球台所属的校区</div>
                </div>
            </div>

            <!-- 状态设置 -->
            <div class="form-section">
                <h5 class="section-title">
                    <i class="bi bi-toggle-on"></i>状态设置
                </h5>

                <div class="form-row">
                    {{ form.status.label(class="form-label") }}
                    <div class="status-options">
                        {% for value, label in form.status.choices %}
                        <label class="status-option">
                            <input type="radio" name="status" value="{{ value }}" {% if form.status.data == value %}checked{% endif %}>
                            <div class="status-content">
                                {% if value == 'available' %}
                                <i class="bi bi-check-circle status-icon" style="color: #28a745;"></i>
                                <div class="status-label">可用</div>
                                <div class="status-desc">球台正常开放使用</div>
                                {% elif value == 'maintenance' %}
                                <i class="bi bi-tools status-icon" style="color: #ffc107;"></i>
                                <div class="status-label">维护中</div>
                                <div class="status-desc">暂时不可预约</div>
                                {% elif value == 'disabled' %}
                                <i class="bi bi-x-circle status-icon" style="color: #dc3545;"></i>
                                <div class="status-label">禁用</div>
                                <div class="status-desc">停止使用</div>
                                {% endif %}
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                    {% if form.status.errors %}
                        {% for error in form.status.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="form-row">
                    <div class="form-check">
                        {{ form.is_active(class="form-check-input") }}
                        {{ form.is_active.label(class="form-check-label") }}
                    </div>
                    {% if form.is_active.errors %}
                        {% for error in form.is_active.errors %}
                        <div class="invalid-feedback">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    <div class="form-text">取消激活将隐藏球台，不影响现有预约</div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <a href="{{ url_for('tables.list') }}" class="btn btn-secondary btn-action">
                    <i class="bi bi-arrow-left me-2"></i>取消
                </a>

                <button type="submit" class="btn btn-primary btn-action">
                    <i class="bi bi-plus-circle me-2"></i>创建球台
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 表单验证增强
    const form = document.querySelector('form');
    const submitBtn = document.querySelector('button[type="submit"]');

    // 实时验证
    const validateField = function(field) {
        const feedback = field.parentNode.querySelector('.invalid-feedback');
        if (field.checkValidity()) {
            field.classList.remove('is-invalid');
            field.classList.add('is-valid');
            if (feedback) feedback.style.display = 'none';
        } else {
            field.classList.remove('is-valid');
            field.classList.add('is-invalid');
            if (feedback) feedback.style.display = 'block';
        }
    };

    // 为必填字段添加实时验证
    const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');
    requiredFields.forEach(field => {
        field.addEventListener('blur', () => validateField(field));
        field.addEventListener('input', () => {
            if (field.classList.contains('is-invalid')) {
                validateField(field);
            }
        });
    });

    // 表单提交前验证
    form.addEventListener('submit', function(e) {
        const nameField = document.querySelector('input[name="name"]');
        const campusField = document.querySelector('select[name="campus_id"]');

        let isValid = true;

        // 校验必填字段
        if (!nameField.value.trim()) {
            nameField.focus();
            isValid = false;
        } else if (!campusField.value) {
            campusField.focus();
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
            return false;
        }

        // 提交确认
        if (!confirm('确定要创建此球台吗？')) {
            e.preventDefault();
            return false;
        }

        // 防止重复提交
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>创建中...';

        // 5秒后重新启用按钮（防止网络问题导致按钮永久禁用）
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-plus-circle me-2"></i>创建球台';
        }, 5000);
    });

    // 数字输入框格式化
    const numberInputs = document.querySelectorAll('input[type="number"]');
    numberInputs.forEach(input => {
        input.addEventListener('input', function() {
            if (this.value < 0) this.value = 0;
        });
    });
});
</script>
{% endblock %}